Introduction

One of the recent assignments for the Data Science class was a personal website. The only aspects that were required of the assignment was a landing page, a resume and some links to your email and Github. As you finish more class projects and maybe personal projects, it might be good to put them on your website. You may also want to add some personal flair to your site, so this tutorial will lay out some things that you may want to try out.

A Good Project Page

One thing a website is great for is showcasing skills that you accrued in your coursework. This will become especially apparent as you do your Data Science Final Project and take more project-oriented classes like Data Science II or Topics in Computing. But, how do you talk about your project in an accessible way to future employers?

What not to do

The easiest thing to do with a new project that you’ve finished is to just copy-and-paste it from your final report into an .Rmd and then post it to your website. The most important thing to keep in mind is your audience. Most of the time, your personal portfolio is going to be directed at future employers.

First: Frame the project for your audience

With an audience in mind, you can start tuning the writing of your project to them. Employers are always looking to see if you have the correct skill set for their job opening. Many job positions have many, many people applying to them, so ideally you would make it as easy as possible to see what skills you used on a project:

This is an example from my own website:

Laying out the problem and skills that you used makes it immediately clear what you did for the project. Instead of having someone read through the entire page to figure this out, it’s better to say it and let them read more if they’re interested. Most of the time, people are only going to be looking through your portfolio for a few minutes, so they really have to count.

Second: Show don’t tell

There’s a huge difference between writing a paragraph on your findings and having a succinct visualization that captures everything you’ve written. There’s many ways that you can play around with this on your site, but do your best to try to have the prettiest possible graph/chart/visualization on your results and accompany it with text that stresses what the reader should get from the visualization. This is similar advice to framing things for your audience: make things as easy as possible to understand.

This visualization comes from the same project page shown above. I spent a really long time finding a color scheme that I liked and tuning the visualization to be as simple as possible. Immediately after, I write about the takeaways. It’s not shown, but I’ve actually edited the document so that the code block that produces the visualization is there, but it defaults to being hidden. But it’s there for interested eyes.

Third: Reflect a bit

Not every project will end exactly how you want it. Sometimes you’ll need to wrap up a project a lot sooner than you’re ready. With that in mind, it’s also important to show employers that you can think back on a project and offer potential suggestions to yourself on how you can improve it. You could also offer some ideas on ways you can extend the project. No need to do a whole soul-searching journey for this, but it’s a good thing to show, especially if it’s a project that has piqued the interest of an employer.

Incorporating custom CSS

CSS is too big of a topic to cover in this short of a time span, but we can at least teach you how to start customizing the look of your site. CSS stands for Cascading Style Sheets. It’s not quite a programming language, but it has a particular syntax that you have to follow if you want it to work out.

Creating a .css file

Like how an .Rmd file contains all of your R and Markdown. a .css file will contain all of your CSS. With your favorite text editor, create an empty text file and rename is styles.css. Having the .css extension will tell RStudio and Github that this file has CSS in it. Take this file and stick it into the directory of your site:

As a note, you don’t need to call it styles.css, but conventionally people just go with this.

Linking it to your site

Now that you have a .css file in your directory, you need to tell your website that it should reference this .css file when building out your site. In your _site.yml file, you’ll need to reference it. When you’re knitting all of your .Rmd into html files, you can actually tell RMarkdown that you want it to also look at the styles.css file that you just made.

You can ignore the highlight and include commands, but this part should be included in your _site.yml:

output:
  html_document:
    css: styles.css (or whatever you called your file)

Doing this will allow your site to incorporate this custom CSS into your site whenever you build it.

Quick Example: Using a Google Font

In demonstrating the syntax for CSS, we’ll use a simple example with fonts. You usually have to pay for fonts, but thankfully Google offers hundreds of free fonts that you can use for your site. In order to use a Google Font, you have to first go to the Google Fonts site.

Find a font that you like! I’ll use the Roboto font as an example since it’s on the front page. Click the red cross, and you’ll get a black tab at the bottom that says “Family Selected”. If you click this tab, you’ll be able to extract CSS code that you can put into your styles.css file. There’s multiple ways to do this, but we’ll go with the “Import” way. Click on the Import button, and you’ll be shown some CSS code.

Take this piece of code without the <style> tags and paste it right into your styles.css! I’ve added a few more fonts into my own css file, but it’s ultimately the same process:

CSS Syntax

You can think of CSS syntax as just a dictionary. Within an HTML element, you’ll want to change a particular aspect about it. You’ll list this as the aspect you want to change, followed by a colon, and then the specific value you want to change it to. By putting that import statment into our styles.css folder, our site now has access to the specific fonts that we bring into it. In my case, I’ve brought in the Roboto and Chakra Petch fonts.

If I want to change all of the p tags to have the Roboto font, I’ll need to specify this in the styles.css:

To be honest, most of the changes that I’ve made to my site all have to do with size, color or aspects of the font. There’s many, many, many things that you can change. Learning CSS is a very “Google the specific attribute that I want to change” type of process. If I want to change the color of my font, often I’ll just need to look up “css font color” in Google and see what I need to do.

A Lament About CSS

When you get something correct in CSS, the result is immediately apparent: you see the desired change on your site. When you don’t get it correct, CSS doesn’t throw an error, but it doesn’t really do anything either. This aspect about it is what makes it really frustrating to work with. A good way to experiment around this is to quickly and repeatedly knit the page that you’re working on every time you make a change to styles.css.